<template>
  <div>
    <el-dialog
      :title="type ? '记录' : '跟进'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      center
    >
      <div>
        <div v-if="!type">
          <el-form
            ref="fllowFrom"
            :model="fllowFrom"
            label-width="100px"
            size="small"
          >
            <el-form-item label="状态">
              <el-select
                v-model="fllowFrom.followStatus"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.title"
                  :label="item.title"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="跟进内容：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入跟进内容"
                maxlength="50"
                show-word-limit
                v-model="fllowFrom.remark"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="跟进人"
              :rules="{
                required: true,
                message: '请输入跟进人',
                trigger: 'blur',
              }"
              prop="followName"
            >
              <el-input
                type="text"
                :rows="2"
                maxlength="50"
                placeholder="请输入跟进人"
                v-model="fllowFrom.followName"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <ul class="history_list" v-else>
          <li class="content" v-for="(item, index) in historyList" :key="index">
            <div class="top">
              <div class="left">时间:{{ item.createTime }}</div>
              <div class="right">
                状态：{{ statusOptions[item.followStatus] }}
              </div>
            </div>
            <div class="mid">
              <div class="left">跟进人：{{ item.followName }}</div>
            </div>
            <div class="btm">
              <div class="left">跟进内容：{{ item.remark }}</div>
            </div>
          </li>
          <li class="no_data" v-if="historyList.length < 1">暂无数据</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!type">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="upStatus">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { upFllowSta, queryFllowHistory } from "@/views/wxaMallModule/api/loan";
import { defaults } from "js-cookie";
export default {
  props: {
    statusList: {
      type: Array,
      default: [],
    },
    statusOptions: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      //   显示跟进
      dialogVisible: false,
      historyList: [],
      //   弹窗表单数据
      fllowFrom: {
        followStatus: "",
        remark: "",
        followName: "",
        tweeterShareCarInfoId: "",
      },
      type: "",
    };
  },
  methods: {
    //   打开弹窗
    openFllowUpDialog(data, type) {
      this.type = type;
      if (type) {
        queryFllowHistory({ tweeterShareCarInfoId: data.id }).then((res) => {
          if (res.code == 0) {
            this.historyList = res.data;
          }
        });
      } else {
        this.fllowFrom.followStatus = data.status;
        this.fllowFrom.tweeterShareCarInfoId = data.id;
      }
      this.dialogVisible = true;
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.fllowFrom = {
        followStatus: "",
        remark: "",
        followName: "",
        tweeterShareCarInfoId: "",
      };
    },
    // 更新跟进状态
    upStatus() {
      this.$refs.fllowFrom.validate((valid) => {
        if (valid) {
          upFllowSta(this.fllowFrom).then((res) => {
            if (res.code == 0) {
              this.$message.success("更新状态成功");
              this.handleClose();
              this.$emit("upFatherData");
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.history_list {
  font-size: 16px;
  max-height: 500px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .content {
    background-color: #f2f2f2;
    padding: 20px 10px 20px 20px;
    margin-bottom: 20px;
    :last-child {
      margin-bottom: 0 !important;
    }
    > div {
      margin-bottom: 15px;
    }
    .top {
      display: flex;
      justify-content: space-between;
    }
  }
  .no_data {
    display: flex;
    padding: 50px 0;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
</style>